<!DOCTYPE html>
<!--  引入thymeleaf标签库  这样，才能使用th:*形式的标签！ 通过${…}进行取值  链接表达式: @{…}  这种符号的【替换】，都是在【服务器端】完成的，如果没有服务器端去【解析】和【替换】这些【标记符号】，这些标记符号就真的只是普通字符串而已 -->
<html  xmlns="http://www.w3.org/1999/xhtml"
	   xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>短信推送控制台</title>
	<!--  引入vue.js  因为Element UI 依赖vue -->
	<script th:src="@{static/js/message/vue.js}"></script>
	<!--  引入element组件库 -->
	<script th:src="@{static/js/message/index.js}"></script>
	<!--  引入element样式 -->
	<link rel="stylesheet" th:href="@{static/css/message/index.css}">
	<!--  引入axios组件 -->
	<script th:src="@{static/js/message/axios.min.js}"></script>
	<!--  引入自定义样式 -->
	<link rel="stylesheet" th:href="@{static/css/message/02.css}">

</head>


<body>

<!--
说明：

负责人：赵扬
页面描述：《系统消息推送管理页面》，用来查看已经推送成功的信息和推送失败的信息。并提供信息编辑，删除，取消的功能。
创建时间：2020年12月14日14:57:08


-->


<div id="alice">

短信推送控制台
<el-divider></el-divider>

<el-button @click="div2_Visible = true" type="success" size="small">新建发送任务</el-button>


 <div id="crazy_hat">

<div class="div_out">
	<div class="span">
			<span class="star">*</span> 关键字：
			<div class="div_inner">  
				<el-input v-model="keyWord" placeholder="请输入关键字"></el-input>
			</div>
	</div>

	<div class="span">
			<span class="star">*</span> 类型：
			<div class="div_inner">
				<el-select v-model="SMS_type_selectedID" placeholder="选择消息类型"   size="small">
					<el-option v-for="item in SMS_type" :key="item.id" :label="item.name" :value="item.id">
						{{item.name}}
					</el-option>
				</el-select>
			</div>
	</div>


	<div class="span">
			<span class="star">*</span> 发送时间：
			<div class="div_inner">
				<el-date-picker
				  v-model="sendingTime"
				  type="date"
				  placeholder="选择日期"
				  format="yy-MM-dd"
				  value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>
			</div>
	</div>


	<div class="span">
		<el-button type="success" size="small" @click="re_load">查询</el-button>
	</div>

	<div class="span">
		<el-button  size="small" @click="reset_search">重置</el-button>
	</div>







	<div>
		  <el-table
			:data="miniTableData"
			style="width: 100%"
			@selection-change="handleSelectionChange">

			  <el-table-column
				  type="selection"
				  width="55">
			  </el-table-column>

			 <el-table-column
			  type="index"
			  width="50">
			 </el-table-column>

			<el-table-column
			  prop="msgTypeBean.name"
			  sortable
			  label="消息类型">
			</el-table-column>

			<el-table-column
			  prop="nameValue"
			  label="任务名称">
			</el-table-column>

			<el-table-column
			  prop="descValue"
			  label="任务描述">
			</el-table-column>

			<el-table-column
			  prop="gmtCreate"
			  sortable
			  label="任务创建时间"
			  :formatter="formatDate">
			</el-table-column>

			<el-table-column
			  prop="schoolBean.schoolName"
			  sortable
			  label="发送群体">
			</el-table-column>


			<el-table-column
			  label="操作">
				<el-button @click="showDetalsOfTask" type="text" size="small">查看</el-button>
				<el-button @click="updateSelected" type="text" size="small">编辑</el-button>
				<el-button @click="div1_Visible = true" type="text" size="small">删除</el-button>
			</el-table-column>


		  </el-table>


		<!--分页-->
		<el-pagination
				:page-size="10"
				layout="prev, pager, next"
				:current-page.sync="pageNums"
				@prev-click="prePage"
				@next-click="nextPage"
				:total="taskNums">
		</el-pagination>






	</div>

</div>

	<!--这里，专门放置对话框-->


	 <!--删除对话框-->
	 <el-dialog
			 title="提示"
			 :visible="div1_Visible"
			 width="30%"
			 :before-close="handleClose">
		 <span>确定要删除该记录吗?</span>
		 <span slot="footer" class="dialog-footer">
    <el-button @click="div1_Visible = false">取 消</el-button>
    <el-button type="primary" @click="del_selected">确 定</el-button>
  		</span>
	 </el-dialog>




	 <!--新建对话框-->

	 <el-dialog title="新建短信发送任务" :visible.sync="div2_Visible">

			<div class="div_out">
				<span class="star">*</span> 群发人群：
				<div class="div_inner">
					<el-select v-model="selected_schoolID" placeholder="选择发送的学校"  @change="get_selected_schoolID" :disabled="send_to_all" size="small">
						<el-option v-for="item in school_name_list" :key="item.id" :label="item.schoolName" :value="item.id">
							{{item.schoolName}}
						</el-option>
					</el-select>
				</div>


			</div>


			<div class="div_out">
				<span class="star">*</span> 任务名称：

				<div class="div_inner">
					<el-input v-model="TaskName" placeholder="请输入任务名称" size="small"></el-input>
				</div>

			</div>


			<div class="div_out">
				<span class="star">*</span> 任务描述：

				<div class="div_inner">
					<el-input type="textarea" v-model="TaskDesc" size="small"></el-input>
				</div>

			</div>



			<div class="div_out">
				<span class="star">*</span> 消息类型：

				<div class="div_inner">
					<el-select v-model="SMS_type_selectedID" placeholder="选择消息类型"  @change="get_sms_typeID" size="small">
						<el-option v-for="item in SMS_type" :key="item.id" :label="item.name" :value="item.id">
							{{item.name}}
						</el-option>
					</el-select>
				</div>
			</div>


			<div class="div_out">
				<span class="star">*</span> 短信签名：

				<div class="div_inner">
					<el-select v-model="SMS_sign_selectedID" placeholder="选择短信签名"  @change="get_sms_signID" size="small">
						<el-option v-for="item in SMS_sign" :key="item.id" :label="item.name" :value="item.id">
							{{item.name}}
						</el-option>
					</el-select>
				</div>
			</div>


			<div class="div_out">
				<span class="star">*</span> 短信模板：

				<div class="div_inner">
					<el-select v-model="SMS_archetype_selectedID" placeholder="选择短信模板"  @change="get_sms_archetypeID" size="small">
						<el-option v-for="item in SMS_archetype" :key="item.id" :label="item.name" :value="item.id">
							{{item.name}}
						</el-option>
					</el-select>
				</div>

				<el-row v-if="archetype_content != null">
					<el-col :span="24"><div class="grid-content bg-purple">{{archetype_content}}</div></el-col>
				</el-row>

			</div>


			<div class="div_out">
				<span class="star">*</span> 发送时间：
				<el-radio v-model="send_type" label="1" >立即发送</el-radio>
				<el-radio v-model="send_type" label="2" >定时发送</el-radio>

				<el-date-picker
						v-model="time"
						type="datetime"
						placeholder="选择日期和时间"
						size="medium"
						format="yy-MM-dd hh:mm:ss"
						value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>

			</div>


			</br>
			<el-button type="success" size="small" @click="sendToServer">提交</el-button>
			<el-button @click="div2_Visible = false" size="small">取消</el-button>


	 </el-dialog>




	 <!--查看任务对应的短信发送记录对话框-->
	 <el-dialog title="短信发送记录" :visible.sync="div3_Visible">
		 <el-table :data="taskTableData">
			 <el-table-column type="index" width="50"></el-table-column>
			 <el-table-column property="studentBean.id" label="学生ID" ></el-table-column>
			 <el-table-column property="studentBean.stuName" label="姓名" ></el-table-column>
			 <el-table-column property="sendingTime" label="发送时间"></el-table-column>
			 <el-table-column property="msgTaskBean.nameValue" label="所属任务"></el-table-column>
			 <el-table-column property="msgTaskBean.descValue" label="任务描述"></el-table-column>

		 </el-table>
	 </el-dialog>



	 <!--修改对话框-->

	 <el-dialog title="修改数据" :visible.sync="div4_Visible">


		 <div class="div_out">
			 <span class="star">*</span> 群发人群：
			 <div class="div_inner">
				 <el-select v-model="selectedData.schoolID" placeholder="选择发送的学校"  @change="get_selected_schoolID" :disabled="send_to_all" size="small">
					 <el-option v-for="item in school_name_list" :key="item.id" :label="item.schoolName" :value="item.id">
						 {{item.schoolName}}
					 </el-option>
				 </el-select>
			 </div>


		 </div>

		 <div class="div_out">
			 <span class="star">*</span> 任务名称：

			 <div class="div_inner">
				 <el-input v-model="selectedData.nameValue" placeholder="请输入任务名称" size="small"></el-input>
			 </div>

		 </div>

		 <div class="div_out">
			 <span class="star">*</span> 任务描述：

			 <div class="div_inner">
				 <el-input type="textarea" v-model="selectedData.descValue" size="small"></el-input>
			 </div>

		 </div>
		 <div class="div_out">
			 <span class="star">*</span> 消息类型：

			 <div class="div_inner">
				 <el-select v-model="selectedData.msgTypeID" placeholder="选择消息类型"  @change="get_sms_typeID" size="small">
					 <el-option v-for="item in SMS_type" :key="item.id" :label="item.name" :value="item.id">
						 {{item.name}}
					 </el-option>
				 </el-select>
			 </div>
		 </div>



		 </br>
		 <el-button type="success" size="small" @click="updateSelectedData">提交</el-button>
		 <el-button @click="div4_Visible = false" size="small">取消</el-button>


	 </el-dialog>






 </div>

</div>











<!--  引入自定义js -->
<script th:src="@{static/js/message/02.js}" ></script>

</body>
</html>